<script setup>
// 导入computed函数
import { computed, ref } from 'vue';

// 调用computed函数
// 传入一个函数
// 定义传入函数的返回值
// 这个传入函数的返回值就是页面中将要使用的计算属性
const computedCount = computed(() => {
  return 100;
});
console.log(computedCount.value);

// 定义一个数组
const scores = ref([80, 100, 90, 70, 60]);
const changeScores = () => {
  // scores.value.push(81);
  scores.value.push(Math.ceil(Math.random() * 20 + 70));
};
// 计算优秀成绩
const goods = computed(() => {
  let goods = scores.value.filter((item) => item >= 80);
  return goods;
});
</script>

<template>
  <div>
    <!-- template中直接使用 -->
    <h1>{{ computedCount }}</h1>
    <h1>{{ scores }}</h1>
    <h1>{{ goods }}</h1>
    <button @click="changeScores">改</button>
  </div>
</template>
